<template>

    <div style="margin-bottom:5px">
        <el-input placeholder="请输入被替换内容" style="width:150px" v-model="replaceStrOld" />
        <el-input placeholder="请输入替换内容" style="width:150px" v-model="replaceStrNew" />
        <el-button style="margin-left:5px" type="primary" @click="replace()">替换</el-button>
        <el-button type="primary" @click="contrast()">对比</el-button>
    </div>
    <el-row>
        <el-col :span="12">
            <div>
                <textarea id="oldTextarea" style="height:70%;" v-model="oldstr"></textarea>
                <!-- <editor api-key="calzy5f7goyc4aslwwr789iouvkpwj0jamovjlvhiupo4vlc" v-model="oldstr" :init="settings"
                    style="height: 800px;width: 100%;" /> -->
            </div>
        </el-col>
        <el-col :span="12">
            <div>
                <textarea id="newTextarea" style="height:70%;" v-model="newstr"></textarea>
                <!-- <editor api-key="calzy5f7goyc4aslwwr789iouvkpwj0jamovjlvhiupo4vlc" v-model="newstr" :init="settings"
                    style="height: 800px;width: 100%;" /> -->
            </div>
        </el-col>
    </el-row>
</template>
<script>
    import { ref, reactive, onMounted } from 'vue'
    // import Editor from '@tinymce/tinymce-vue'

    export default ({
        // components: {
        //     'editor': Editor
        // },
        setup() {
            const height = window.screen.height * 0.7;
            // const settings = reactive({
            //     toolbar: '',
            //     height: height,
            //     menu: {
            //     },
            //     menubar: '',
            //     setup: ((editor) => {

            //     })
            // });
            const oldstr = ref("");
            const newstr = ref("");
            const replaceStrOld = ref("");
            const replaceStrNew = ref("");


            onMounted(() => {
                window.tinymce.init({
                    selector: '#oldTextarea',
                    toolbar: '',
                    height: height,
                    menu: {

                    },
                    menubar: '',
                    setup: function (editor) {

                    }
                });
                window.tinymce.init({
                    selector: '#newTextarea',
                    toolbar: '',
                    height: height,
                    menu: {

                    },
                    menubar: '',
                    setup: function (editor) {

                    }
                });
            })

            //对比
            const contrast = () => {
                CompareTxt('oldTextarea', 'newTextarea');
            };
            //替换
            const replace = () => {
                var val = tinyMCE.editors["oldTextarea"].getContent({ format: 'text' });

                while (val.indexOf(replaceStrOld.value) > -1) {
                    console.log(val);
                    val = val.replace(replaceStrOld.value, replaceStrNew.value);
                };
                tinyMCE.editors["newTextarea"].setContent(val);
            };

            return { replaceStrOld, replaceStrNew, height, oldstr, newstr, replace, contrast }
        }
    })
</script>